<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/moren.css">
    <link rel="stylesheet" href="./css/fenlei.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/css/swiper.min.css" rel="stylesheet">
</head>
<body>
    
    
    <header>
        <div class="classification_top">
            <div class="classification_column">
            <div class="column_center">
               <a href="yemian4.html">Back</a>
            </div>
            <div class="column_center"><span>分类</span></div>
            <div class="column_center_1">
                广州市<img src="./分类/城市切换下拉.png" alt="">
            </div>
            </div>
            <!-- 轮播图 -->
            <div class="classification_picture">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide a">
                            <div class="tu_neirong"><img src="./首页/图层1.png" alt="">美食</div>
                            <div class="tu_neirong"><img src="./分类/图层3.png" alt="">电影</div>
                            <div class="tu_neirong"><img src="./分类/图层4.png" alt="">运动</div>
                            <div class="tu_neirong"><img src="./分类/图层5.png" alt="">唱歌</div>
                        </div>
                        <div class="swiper-slide b">
                            <div class="tu_neirong"><img src="./分类/图层1.png" alt="">美食</div>
                            <div class="tu_neirong"><img src="./分类/图层3.png" alt="">电影</div>
                            <div class="tu_neirong"><img src="./分类/图层4.png" alt="">运动</div>
                            <div class="tu_neirong"><img src="./分类/图层5.png" alt="">唱歌</div>
                        </div>
                        <div class="swiper-slide c">
                            <div class="tu_neirong"><img src="./分类/图层1.png" alt="">美食</div>
                            <div class="tu_neirong"><img src="./分类/图层3.png" alt="">电影</div>
                            <div class="tu_neirong"><img src="./分类/图层4.png" alt="">运动</div>
                            <div class="tu_neirong"><img src="./分类/图层5.png" alt="">唱歌</div>
                        </div>
                        <div class="swiper-slide c">
                            <div class="tu_neirong"><img src="./分类/图层1.png" alt="">美食</div>
                            <div class="tu_neirong"><img src="./分类/图层3.png" alt="">电影</div>
                            <div class="tu_neirong"><img src="./分类/图层4.png" alt="">运动</div>
                            <div class="tu_neirong"><img src="./分类/图层5.png" alt="">唱歌</div>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    
                    <!-- 如果需要导航按钮 -->
                    <!-- <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div> -->
                    
                    <!-- 如果需要滚动条 -->
                    <!-- <div class="swiper-scrollbar"></div> -->
                </div>
            </div>
        </div>
    </header>
    <!-- 头部 -->
    <main>
        <div class="discount_buying_2">
            <div class="dc_3"><img src="./分类/图层9.png" alt=""><span>热门收搜</span></div>
            <div class="dc_4"><span>更多</span><img src="./首页/更多.png" alt=""></div>
        </div>
        <div class="option">
            <div class="option_content"><img src="./分类/图层10.png" alt=""></div>
            <div class="option_content"><img src="./分类/图层11.png" alt=""></div>
            <div class="option_content"><img src="./分类/图层12.png" alt=""></div>
            <div class="option_content"><img src="./分类/图层13.png" alt=""></div>
        </div>
        <div class="discount_buying_2">
            <div class="dc_3"><img src="./分类/图层9.png" alt=""><span>美食类</span></div>
            <div class="dc_4"><span>更多</span><img src="./首页/更多.png" alt=""></div>
        </div>
        <div class="option">
            <div class="option_content"><img src="./分类/图层10.png" alt=""></div>
            <div class="option_content"><img src="./分类/图层11.png" alt=""></div>
            <div class="option_content"><img src="./分类/图层12.png" alt=""></div>
            <div class="option_content"><img src="./分类/图层13.png" alt=""></div>
        </div>
        
        <!-- 美食类 -->
        <div class="discount_buying_2">
            <div class="dc_3"><img src="./分类/图层7.png" alt=""><span>运动类</span></div>
            <div class="dc_4"><span>更多</span><img src="./首页/更多.png" alt=""></div>
        </div>
        
        <div class="option">
            <div class="option_content"><img src="./分类/图层14.png" alt=""></div>
            <div class="option_content"><img src="./分类/图层15.png" alt=""></div>
            <div class="option_content"><img src="./分类/图层16.png" alt=""></div>
            <div class="option_content"><img src="./分类/图层17.png" alt=""></div>
        </div>
        <!-- 运动类 -->
        <div class="discount_buying_2">
            <div class="dc_3"><img src="./分类/图层8.png" alt=""><span>电影类</span></div>
            <div class="dc_4"><span>更多</span><img src="./首页/更多.png" alt=""></div>
        </div>
        <div class="option">
            <div class="option_content"><img src="./分类/图层18.png" alt=""></div>
            <div class="option_content"><img src="./分类/图层18.png" alt=""></div>
            <div class="option_content"><img src="./分类/图层19.png" alt=""></div>
            <div class="option_content"><img src="./分类/图层19.png" alt=""></div>
        </div>
        <!-- 电影类 -->
    </main>
    <!-- 架构 -->
    <footer>
        <div class="bottom_classification">
            <div class="classification_center"><a href="yemian1.html"><img src="./首页.png" alt=""></a>首页</div>
            <div class="classification_center"><a href="yemian2.html"><img src="./分类4.png" alt=""></a>分类</div>
            <div class="classification_center"><a href="yemian3.html"><img src="./形状7副本.png" alt=""></a>发现</div>
            <div class="classification_center"><a href="yemian5.html"><img src="./我的.png" alt=""></a>我的</div>
        </div>
    </footer>
    <!-- 脚部 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.0.0/js/swiper.min.js"></script>
    <script>        
        var mySwiper = new Swiper ('.swiper-container', {
          direction: 'horizontal',
          loop: true,
          autoplay : 2000,
          effect : 'flip',
          // 如果需要分页器
          pagination: '.swiper-pagination',
          
          // 如果需要前进后退按钮
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          
          
          // 如果需要滚动条
        //   scrollbar: '.swiper-scrollbar',
        })        
        </script>
        <!-- 轮播图按钮 -->
</body>
</html>